<template>
<div class="search-results-page">
    <div class="search-results-container">
        <div class="search-results-header">
            <div class="search-input-container">
                <el-input v-model="inputKeyword" placeholder="搜索网站..." prefix-icon="el-icon-search" clearable
                    @keyup.enter.native="handleSearch">
                    <template #append>
                        <el-button icon="el-icon-search" @click="handleSearch"></el-button>
                    </template>
                </el-input>
            </div>
            <div class="search-info">
                <h1>搜索 "{{ displayKeyword }}" 的结果</h1>
                <p v-if="searchResults.length > 0">共找到 {{ searchResults.length }} 个相关网站</p>
                <p v-else>未找到相关网站</p>
            </div>
        </div>

        <div class="search-results-content" v-loading="loading">
            <el-empty description="未找到相关网站" v-if="!loading && searchResults.length === 0"></el-empty>

            <div class="search-results-list" v-else>
                <el-row :gutter="20">
                    <el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" v-for="site in searchResults" :key="site.id">
                        <el-card class="website-card" shadow="hover">
                            <div class="website-icon">
                                <img :src="site.icon" :alt="site.name" v-if="site.icon">
                                <i class="el-icon-link" v-else></i>
                            </div>
                            <div class="website-info">
                                <h3>{{ site.name }}</h3>
                                <p>{{ site.description }}</p>
                                <div class="button-container">
                                    <el-button type="primary" size="small" @click="openWebsite(site.url)">
                                        访问网站
                                    </el-button>
                                </div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import { searchWebsites } from '@/api/index'

export default {
    name: 'SearchResults',
    data() {
        return {
            inputKeyword: '', // 输入框关键词
            displayKeyword: '', // 显示用关键词（标题中显示）
            searchResults: [],
            loading: false
        }
    },
    created() {
        // 从URL查询参数获取搜索关键词
        const query = this.$route.query.searchText;
        console.log('URL查询参数:', this.$route.query);

        if (query) {
            this.inputKeyword = query;
            this.displayKeyword = query; // 初始显示关键词与输入关键词一致
            this.handleSearch();
        }
    },
    methods: {
        async handleSearch() {
            if (this.inputKeyword.trim() === '') {
                return;
            }

            console.log('执行搜索:', this.inputKeyword);

            // 更新显示的关键词
            this.displayKeyword = this.inputKeyword;

            // 更新URL，但不重新加载页面
            this.$router.push({
                path: '/search',
                query: { searchText: this.inputKeyword }
            }).catch(err => {
                console.error('路由跳转错误:', err);
            });

            this.loading = true;
            this.searchResults = [];

            try {
                const res = await searchWebsites(this.inputKeyword);
                if (res && res.data) {
                    this.searchResults = res.data;
                }
            } catch (error) {
                console.error('搜索失败:', error);
                this.$message.error('搜索失败，请稍后重试');
            } finally {
                this.loading = false;
            }
        },
        openWebsite(url) {
            window.open(url, '_blank');
        }
    }
}
</script>

<style scoped>
.search-results-page {
    padding: 20px;
    margin-top: 0;
    /* 移除顶部间距，因为App.vue已经为header留出了空间 */
    min-height: calc(100vh - 80px);
}

.search-results-container {
    max-width: 1600px;
    margin: 0 auto;
    padding-top: 10px;
    /* 减少顶部内边距 */
}

.search-results-header {
    margin-bottom: 20px;
    /* 减少底部间距 */
    text-align: center;
}

.search-input-container {
    max-width: 600px;
    margin: 0 auto 15px auto;
}

/* 确保输入框样式与Header保持一致 */
.search-input-container .el-input {
    width: 100%;
}

.search-input-container .el-input__inner {
    height: 40px;
    line-height: 40px;
}

.search-info h1 {
    font-size: 22px;
    /* 减小标题字体大小 */
    color: #303133;
    margin-top: 10px;
    margin-bottom: 8px;
}

.search-info p {
    font-size: 14px;
    color: #606266;
    margin: 0;
}

.search-results-content {
    min-height: 400px;
}

.website-card {
    margin-bottom: 20px;
    height: 100%;
    min-height: 220px;
    display: flex;
    flex-direction: column;
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
}

.website-card:hover {
    border-color: #409EFF;
}

.website-icon {
    text-align: center;
    margin-bottom: 10px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.website-icon img {
    width: 50px;
    height: 50px;
    object-fit: contain;
}

.website-icon i {
    font-size: 30px;
    color: #909399;
}

.website-info {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.website-info h3 {
    margin: 10px 0;
    font-size: 16px;
    height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.website-info p {
    color: #666;
    font-size: 14px;
    margin-bottom: 15px;
    height: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.button-container {
    margin-top: auto;
    text-align: center;
}

/* 响应式样式 */
@media (max-width: 768px) {
    .search-input-container {
        width: 100%;
    }

    .website-card {
        margin-bottom: 15px;
    }
}
</style>